<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>室内使用信息添加</title>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-1.11.1.js"></script>
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/form.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript">
	var indoorFlag;//查看、编辑状态
	$(document).ready(function() {
		$("#roomUseProperty").select2();
		initSelectData();
		initIndoorMsg();
	});

	function initIndoorMsg() {
		var indoorId = $("#infoorManageAddForm").find("input[name='id']").val();
		indoorFlag = '${indoorFlag}';
		if (indoorId == "") {
			//重置表单
			$("#infoorManageAddForm")[0].reset();
			$("#infoorManageAddForm #btn_div2").hide();
			$("#infoorManageAddForm #btn_div1").show();
		} else {
			$.post("roomInfo/getIndoorManage",
				{
					id : indoorId
				},
				function(data, status) {
				console.log(data);
					if (data != null) {
						$("#infoorManageAddForm").find(
								"[name='roomTypeId']").val(
								data.roomType).trigger("change");
						$("#infoorManageAddForm").find(
								"[name='roomStatus']").val(
								data.roomStatus).trigger("change");
						$("#infoorManageAddForm").find(
								"[name='roomUseProperty']").val(
								data.roomUseProperty).trigger(
								"change");
						$("#infoorManageAddForm").find(
								"input[name='peopleCount']").val(
								data.peopleCount);
						$("#infoorManageAddForm").find(
								"input[name='resident']").val(
								data.resident);
						$("#infoorManageAddForm").find(
								"input[name='riskArticle']").val(
								data.riskArticle);
						$("#infoorManageAddForm").find(
								"input[name='notriskArticle']")
								.val(data.notriskArticle);
						$("#infoorManageAddForm").find(
								"input[name='diningRoom']").val(
								data.diningRoom);
						$("#infoorManageAddForm").find(
								"input[name='meeting']").val(
								data.meeting);
						$("#infoorManageAddForm").find(
								"input[name='work']")
								.val(data.work);
						$("#infoorManageAddForm").find(
								"#other").val(
								data.other);
						$("#infoorManageAddForm").find(
								"input[name='tradeFair']").val(
								data.tradeFair);
						var workUses = data.workUse;
						if (data.roomType == "房间"
								&& data.roomUseProperty == "办公") {
							if (workUses != null && workUses != "") {
								var useArr = workUses.split(",");
								for (var i = 0; i < useArr.length - 1; i++) {
									var html = "<tr class=\"wUse\"><td width=\"73\"><span>用途</span></td><td width=\"320\"><input type=\"type\"id=\"\"name=\"workUse\"value=\""+useArr[i]+"\"/> "
											+ "<a href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
									$("#infoorManageAddForm table")
											.append(html);
								}
							}
						}
						if (indoorFlag == "1") {
							//隐藏按钮
							$("#infoorManageAddForm #btn_div2")
									.hide();
							$("#infoorManageAddForm #btn_div1")
									.hide();
							$("#infoorManageAddForm .icon-fullscreen").hide();
							$("#infoorManageAddForm")
									.find(
											".addbtn,select,input[type='file']")
									.attr("disabled", true);
							$("#infoorManageAddForm").find(
									"input,textarea").attr(
									"readonly", true);

						} else {
							$("#infoorManageAddForm #btn_div2")
									.show();
							$("#infoorManageAddForm #btn_div1")
									.hide();
							$("#infoorManageAddForm #changeRemark")
									.show();
						}
					}
				});
		}

	}
	var optIndoor;
	//optIndoor操作字段，0：临时保存；1：新增；2：修改
	function saveIndoor(val) {
		optIndoor = val;
		if (val == 3) {
			//解除锁定状态
			var index = layer.confirm('确定开启编辑状态？', {
				offset : '20%',
				shade : 0
			}, function() {
				//去除只读开启按钮编辑
				$("#infoorManageAddForm").find("input,textarea").attr(
						"readonly", false);
				$("#infoorManageAddForm").find(
						"select,.addbtn,input[type='file']").attr("disabled",
						false);
				$("#infoorManageAddForm #modifyBtn").hide();
				$("#infoorManageAddForm .hidbtn").addClass("showbtn");
				layer.close(index);
			});
		} else {

			$("#infoorManageAddForm").submit();
		}
	}

	function initSelectData() {
		var html = "";
		var arr = [ "客厅", "居住", "仓储", "办公", "商展", "其他" ];
		for (var i = 0; i < arr.length; i++) {
			html = "<option value=\"" + arr[i] + "\">" + arr[i] + "</option>";
			$("#roomUseProperty").append(html);
		}
	}

	function change2(obj) {
		var val = $(obj).val();
		var roomUseProperty = $("#roomUseProperty").val();
		if (val == "房间" && roomUseProperty == "办公") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").show();
			$("#panel_5").hide();
			$("#panel_6").hide();
			$(".wUse").show();
			$("#panel_4 .addbtn").show();
		} else if (val != "房间" && roomUseProperty == "办公") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").show();
			$("#panel_4").show();
			$("#panel_5").show();
			$("#panel_6").hide();
			$(".wUse").hide();
			$("#panel_4 .addbtn").hide();
		}
	}
	function change(obj) {
		var val = $(obj).val();
		var roomTypeId = $("#roomTypeId").val();
		if (val == "居住") {
			$("#panel_1").show();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		} else if (val == "仓储") {
			$("#panel_1").hide();
			$("#panel_2").show();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		} else if (val == "办公") {
			if (roomTypeId == "房间") {//---------------------------------------
				$("#panel_1").hide();
				$("#panel_2").hide();
				$("#panel_3").hide();
				$("#panel_4").show();
				$("#panel_5").hide();
				$("#panel_6").hide();
				$(".wUse").show();
				$("#panel_4 .addbtn").show();

			} else {
				$("#panel_1").hide();
				$("#panel_2").hide();
				$("#panel_3").show();
				$("#panel_4").show();
				$("#panel_5").show();
				$("#panel_6").hide();
				$(".wUse").hide();
				$("#panel_4 .addbtn").hide();
			}
		} else if (val == "客厅") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").show();
			$("#panel_5").hide();
			$("#panel_6").hide();
			$(".wUse").hide();
			$("#panel_4 .addbtn").hide();
		} else if (val == "商展") {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").hide();
			$("#panel_6").show();
		} else {
			$("#panel_1").hide();
			$("#panel_2").hide();
			$("#panel_3").hide();
			$("#panel_4").hide();
			$("#panel_5").show();
			$("#panel_6").hide();
		}
	}
</script>
<style type="text/css">
.td_l {
	width: 80px;
}

tr {
	height: 40px;
	margin: 10px;
}
</style>
</head>
<body>
	<form class="cmxform" id="infoorManageAddForm" method="post"
		action="roomInfo/addIndoorManage">
		<div style="padding: 10px 0px">

			<div class="panel panel-default">
				<div name="type" style="padding: 10px;">
					房屋类型：<select class="js-example-basic-single" name="roomTypeId"
						id="roomTypeId" style="width: 135px;" ><!-- onchange="change2(this)" -->
					</select> &nbsp; 房屋状态：<select class="js-example-basic-single"
						name="roomStatus" id="roomStatus" style="width: 135px;"
						onchange="showTableMsg(this)">
						<option value="0">空置</option>
						<option value="1">在用</option>
					</select>
				</div>
				<div class="panel-body" name="roomUse">
					<table width="100%">
						<tr>
							<td>使用性质</td>
							<td colspan="3"><select class="js-example-basic-single"
								name="roomUseProperty" id="roomUseProperty"
								style="width: 135px;"><!--  onchange="change(this)" -->

							</select><input hidden="hidden" id="entityId_indoorId" name="id"
								value="${id }"></td>

						</tr>
						<tr id="panel_1" hidden="hidden">
							<td width="73">居住人数</td>
							<td width="360"><input id="peopleCount" name="peopleCount"
								value="0" /></td>
							<td width="73">居住人</td>
							<td><input id="resident" name="resident" /></td>
						</tr>
						<tr id="panel_2" hidden="hidden">
							<td width="73">危险品</td>
							<td width="360"><input name="riskArticle" id="riskArticle" />
							</td>
							<td width="73">非危险品</td>
							<td><input name="notriskArticle" id="notriskArticle" /></td>
						</tr>
						<tr id="panel_3" hidden="hidden">
							<td width="73">餐厅</td>
							<td colspan="3"><input name="diningRoom" id="diningRoom" /></td>
							<td width="73">会议</td>
							<td><input name="meeting" id="meeting" /></td>
						</tr>
						<tr id="panel_4" hidden="hidden">
							<td width="73">办公</td>
							<td width="360"><input name="work" id="work" /> <a
								class="btn btn-danger radius a_font addbtn"
								onclick="addTr(this)"> 添加</a></td>
						</tr>
						<tr id="panel_5">
							<td width="73">使用描述</td>
							<td colspan="3">
								<textarea style="width:71%;" rows="3" maxlength="200"
									name="other" id="other" onkeydown="checkMaxInput(this,200)"  
            						onkeyup="checkMaxInput(this,200)" onfocus="checkMaxInput(this,200)" onblur="checkMaxInput(this,200);resetMaxmsg()"></textarea>
								<!-- <input name="other" id="other" /> -->
							</td>
						</tr>
						<tr id="panel_5" hidden="hidden">
							<td width="73">其他</td>
							<td colspan="3">
								<input name="other" id="other" />
							</td>
						</tr>
						<tr id="panel_6" hidden="hidden">
							<td width="73">商展</td>
							<td width="360"><input name="tradeFair" id="tradeFair" /></td>
						</tr>


					</table>
				</div>
				<div id="changeRemark" hidden="hidden">
					<span
						style="display: inline-block; width: 100px; text-align: center;">变更说明</span>
					<textarea rows="3" cols="70" style="width: 65%" name="changeRemark"></textarea>
					<span style="color: red"> *</span>
				</div>
			</div>
			<div style="width: 100%; text-align: center; padding-top: 20px">
				<div id="btn_div1" style="display: none;">
					<button class="btn btn-danger radius my-btn"
						onclick="saveIndoor(0)" type="button">提交</button>
					<button class="btn btn-danger radius my-btn"
						onclick="saveIndoor(1)" type="button">保 存</button>
					<a class="btn btn-default radius" onClick="resetIndoor();"> 重置
					</a> <br />
				</div>
				<div id="btn_div2" style="display: none;">
					<!-- <button id="modifyBtn" type="button"
						class="btn btn-danger radius my-btn" onclick="saveIndoor(3)">启用编辑</button> -->
					<button class="btn btn-danger radius my-btn "
						onclick="saveIndoor(2)" type="button">提交审批</button>
					<a class="btn btn-default radius " onClick="resetIndoor();">重置</a>
				</div>
			</div>
		</div>
	</form>
	<script type="text/javascript">
		$(function() {
			mySubmit("infoorManageAddForm", initPark, successPark);
			var s = $("#roomTypeId").select2();
			var s2 = $("#roomStatus").select2();
			initTypeSelectData();
			s.val("起居室").trigger("change");
			s2.val("0").trigger("change");
		});
		function initTypeSelectData() {
			var html = "";
			var arr = [ "起居室", "餐厅", "厨房", "储物间", "卫生间", "房间", "平台", "阳台" ];
			for (var i = 0; i < arr.length; i++) {
				html = "<option value=\"" + arr[i] + "\">" + arr[i]
						+ "</option>";
				$("#roomTypeId").append(html);
			}
		}

		function addTr(obj) {
			var html = "";
			html = "<tr class=\"wUse\"><td width=\"73\"><span>用途</span></td><td width=\"320\"><input type=\"type\"id=\"\"name=\"workUse\"value=\"\"/> "
					+ "<a href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
			$(obj).parent().parent().parent().append(html);
		}

		//存储将要删除的id，传到后台删除
		var delIds = new Array();
		function delTr(obj) {
			var id = $(obj).attr("data-id");
			delIds.push(id);
			$(obj).parent().parent().remove();
			layer.msg("点击保存后，将彻底删除该条数据！");
		}

		function resetIndoor() {
			$("#infoorManageAddForm").find(
					"input:not([id^=entityId_],[id=peopleCount])").val("");
		}

		//展示房间使用
		function showTableMsg(obj) {
			var val = $(obj).val();
			if (val == "1") {
				$("#infoorManageAddForm [name='roomUse']").show();
				$("#roomUseProperty").val("客厅").trigger("change");
			} else {
				$("#infoorManageAddForm [name='roomUse']").hide();
			}
		}

		//封装表单数据为json
		function initPark() {
			var mli = layer.load(2);
			//封装基础数据
			var indoorId = parent.$("#toAddVac").find("[name='indoorId']")
					.val();
			//房间号、客户id预留
			var fkroomId = $("#roomId", parent.parent.document).val(); //房间id
			var fkcustomerId = parent.parent.$("#customerId").val();
			var roomType = $("#infoorManageAddForm")
					.find("[name='roomTypeId']").val(); //房间类型
			var roomStatus = $("#infoorManageAddForm").find(
					"[name='roomStatus']").val(); //房间状态 0：空置 1：再用
			var roomUseProperty = ""; //房间使用性质
			var peopleCount = 0; //居住人数
			var resident = ""; //居住人
			var riskArticle = ""; //危险品
			var notriskArticle = ""; //非危险品
			var work = ""; //办公
			var meeting = ""; //会议
			var diningRoom = ""; //餐厅
			var other = ""; //其他
			var tradeFair = ""; //商展
			var workUses = "";//办公用途
			if (roomStatus == "1") {
				roomUseProperty = $("#infoorManageAddForm").find(
						"#roomUseProperty").val(); //房间使用性质
				peopleCount = $("#infoorManageAddForm").find(
						"input[name='peopleCount']").val(); //居住人数
				resident = $("#infoorManageAddForm").find(
						"input[name='resident']").val(); //居住人
				riskArticle = $("#infoorManageAddForm").find(
						"input[name='riskArticle']").val(); //危险品
				notriskArticle = $("#infoorManageAddForm").find(
						"#notriskArticle").val(); //非危险品
				work = $("#infoorManageAddForm").find("#work").val(); //办公
				meeting = $("#infoorManageAddForm").find("#meeting").val(); //会议
				diningRoom = $("#infoorManageAddForm").find("#diningRoom")
						.val(); //餐厅
				other = $("#infoorManageAddForm").find("#other").val(); //其他
				tradeFair = $("#infoorManageAddForm").find("#tradeFair").val() //商展
				var $t = $("#infoorManageAddForm table").find(
						"input[name='workUse']");
				$.each($t, function(i, v) {
					workUses += $(v).val() + ",";
				});
			}
			var changeRemark = $("#infoorManageAddForm [name='changeRemark']")
					.val();
			if (optIndoor == "2" && changeRemark == "") {
				layer.msg("变更说明不能为空");
				$("#infoorManageAddForm [name='changeRemark']").focus();
				layer.close(mli);
				return null;
			} else if (!testNum(peopleCount)) {
				layer.close(mli);
				layer.msg("居住人数请输入数值");
				$("#peopleCount").focus();
				return null;
			} else {
				return {
					id : indoorId,
					fkroomId : fkroomId,
					fkcustomerId : fkcustomerId,
					roomType : roomType,
					roomStatus : roomStatus,
					roomUseProperty : roomUseProperty,
					peopleCount : peopleCount,
					resident : resident,
					riskArticle : riskArticle,
					notriskArticle : notriskArticle,
					work : work,
					meeting : meeting,
					diningRoom : diningRoom,
					other : other,
					tradeFair : tradeFair,
					opt : optIndoor,
					changeRemark : changeRemark,
					workUse : workUses
				};
			}
		}

		//成功后调用方法
		function successPark(responseText) {
			layer.close(layer.index);
			if (responseText.success) {
				layer.alert("保存成功！", {
					offset : '20%',
					shade : [ 0.1, '#fff' ]
				}, function() {
					layer.close(layer.index);
					parent.location.reload();
				});

			} else {
				layer.alert('保存失败！');
			}
		}
	</script>
</body>

</html>
